<script setup lang="ts">
import { defineProps, watch, ref } from 'vue'
import QIcon from '@/components/q-icon/q-icon.vue'
import { orderDetailIconConfig } from '@/hooks/useOrderStatus'
import DateUtils from '@/utils/date'

const $props = defineProps({
    updateTime: { type: String, default: '2022-08-12 09:38:48' },
    payTimeOut: { type: String, default: '0' },
    status: {
        type: String,
        default: '暂无状态',
    },
    padding: { type: String, default: '0 100rpx' },
    rightShow: { type: Boolean, default: true },
    countDownShow: { type: Boolean, default: true },
    height: { type: [String, Number], default: '320' },
    countDownLeft: { type: String, default: '剩' },
    countDownRight: { type: String, default: '自动关闭' },
})
const time = ref(0)
const dateTool = new DateUtils()
watch(
    () => $props.payTimeOut,
    (val) => {
        time.value = countdownTime() as number
    },
)

function countdownTime() {
    if (!$props.payTimeOut) return
    const createDate = dateTool.getTime($props.updateTime)
    const timeDifference = createDate + Number($props.payTimeOut) * 1000 - new Date().getTime()
    const time = timeDifference > 0 ? timeDifference : 0
    return time
}
</script>

<template>
    <view class="status" :style="{ background: '#fe4e63', height: $props.height + 'rpx', padding: $props.padding }">
        <view class="status__left" :style="{ background: '#fe4e63', height: $props.height + 'rpx' }">
            <view>{{ status }}</view>
            <view v-if="$props.countDownShow && time" class="status__left--time">
                {{ $props.countDownLeft }}<u-count-down :show-days="false" separator="zh" :timestamp="time" /> {{ $props.countDownRight }}
            </view>
            <!-- <view class="f14">{{ rule[$props.ruleStr].text }}</view> -->
        </view>
        <view v-if="$props.rightShow" class="status__right">
            <q-icon :name="orderDetailIconConfig[status  as keyof typeof orderDetailIconConfig]" size="60px" color="#fff" />
        </view>
    </view>
</template>

<style lang="scss" scoped>
@import '@/assets/css/mixins/mixins.scss';
@include b(status) {
    box-sizing: border-box;
    width: 100%;
    padding: 0 100rpx;
    @include flex(space-between);
    @include e(left) {
        @include flex(center, flex-start);
        flex-direction: column;
        color: #fff;
        font-size: 28rpx;
        @include m(time) {
            margin-top: 20rpx;
            @include flex;
        }
    }
    @include e(right) {
        text-align: center;
        width: 170rpx;
        height: 128rpx;
    }
}
</style>
